<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->
    
    <!-- Bootstrap css -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <!-- kendo ui css -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.common.min.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.default.min.css" rel="stylesheet">
    <!-- font-awesome -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/fontawesome/css/font-awesome.css" rel="stylesheet">
    <!--蓝鲸提供的公用样式库 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
    <!-- 包括所有kendoui的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/js/kendo.all.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>
    <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
    <!--[if lt IE 9]>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/html5shiv.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/respond.min.js"></script>
    <![endif]-->
    <!-- 数据埋点统计 -->
    <script src="http://magicbox.bk.tencent.com/static_api/analysis.js"></script>
</head>

<body>
    <!--
如果没有引用以下文件，请去掉此注释
<link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/bk.css" rel="stylesheet">
<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bk-icon-2.0/iconfont.css" rel="stylesheet">
<script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
-->
<div class="bk-sidebar2" id="bk-sidebar2" style="width: 260px;">
    <div class="sidebar-inner">
        <ul>
            <li class="first-menu">
                <a href="javascript:;" class="">
                    <i class="bk-icon icon-pc"></i>概览
                </a>
            </li>
            <li class="first-menu">
                <a href="javascript:;">
                    <i class="bk-icon icon-id"></i>角色管理
                    <span class="pull-right"></span>
                </a>
            </li>
            <li class="has_submenu first-menu">
                <a href="javascript:;" class="on">
                    <i class="bk-icon icon-panel-permission"></i>计算
                    <span class="pull-right"><i class="bk-icon icon-angle-down angle"></i></span>
                </a>
                <ul class="sub-menu second-menu" style="display: none;">
                    <li>
                        <a href="javascript:;">计算一</a>
                    </li>
                    <li>
                        <a href="javascript:;">计算二</a>
                    </li>
                </ul>
            </li>
            <li class="has_submenu first-menu">
                <a href="javascript:;">
                    <i class="bk-icon icon-heart"></i>增强服务
                    <span class="pull-right"><i class="bk-icon icon-angle-down angle"></i></span>
                </a>
                <ul class="sub-menu second-menu" style="">
                    <li>
                        <a href="javascript:;">数据储存</a>
                    </li>
                    <li>
                        <a href="javascript:;">告警监控</a>
                    </li>
                </ul>
            </li>
            <li class=" first-menu has_submenu">
                <a href="javascript:;">
                    <i class="bk-icon icon-script-file"></i>代码管理
                    <span class="pull-right"><i class="bk-icon icon-angle-down angle"></i></span>
                </a>
                <ul class="second-menu" style="">
                    <li>
                        <a href="javascript:;">代码一</a>
                    </li>
                    <li>
                        <a href="javascript:;">代码二</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    $("#bk-sidebar2").on("click", "ul .first-menu>a", function() {
                var _this = $(this);
                $(".first-menu>a").removeClass("on");
                $(this).addClass("on");
                _this.parent(".first-menu").siblings().find(".pull-right").removeClass("rate")
                _this.parent(".first-menu").siblings().find(".second-menu").stop().slideUp();
                if (_this.parent(".first-menu").hasClass("has_submenu")) {
                    _this.parent(".first-menu").find(".pull-right").toggleClass("rate");
                    _this.parent(".first-menu").find(".second-menu").stop().slideToggle();
                } else {
                    return false
                }
            })
</script>
</body>

</html>